<template>
    <v-app>
        <v-content>
            <v-container fluid fill-height>
                <v-scroll-x-transition>
                    <div
                        class="alert"
                        style="background-color: white; !important; border-radius: 5px; height: 55px;"
                    >
                        <v-alert
                            v-show="displayError"
                            type="error"
                            text
                        >
                            Username or password is incorrect
                        </v-alert>
                    </div>
                </v-scroll-x-transition>

                <v-layout align-center justify-center class="background-img">
                    <v-flex xs12 sm8 md4>
                    <v-card class="elevation-12">
                        <v-toolbar dark color="primary">
                            <v-toolbar-title>Welcome to BTSC RSMS</v-toolbar-title>
                        </v-toolbar>
                        <v-form ref="form">
                            <v-card-text>
                                    <v-text-field
                                        label="Username *"
                                        v-model="form.username"
                                        :rules="[v => !!v || 'Username is required']"
                                    ></v-text-field>

                                    <v-text-field
                                        label="Password *"
                                        v-model="form.password"
                                        type="password"
                                        counter
                                        :rules="[v => !!v || 'Password is required']"
                                        @keyup.enter.native="login"
                                    ></v-text-field>
                            </v-card-text>
                            <v-card-actions>
                                <v-spacer></v-spacer>
                                <v-btn  @click="login" :class="{
                                    'primary' : valid, disabled: !valid
                                }">Login</v-btn>
                            </v-card-actions>
                        </v-form>
                    </v-card>
                    </v-flex>
                </v-layout>

                <global-loader :loading="store.loader.isLoading" />
            </v-container>
        </v-content>
    </v-app>
</template>

<script lang="ts">
import Vue from 'vue';
import store from '@/store/Index';
import GlobalLoader from '@/layout/components/GlobalLoader.vue';
import { LoginParam } from '@/type/Auth';
import sleep from '../../helpers/SleepHelper';

export default Vue.extend({
    name: 'Login',
    components: {
        GlobalLoader,
    },
    data(): {
        displayError: boolean;
        form: LoginParam;
        valid: boolean;
        store: any;
        } {
        return {
            displayError: false,
            form: {
                username: '',
                password: '',
            },
            valid: true,
            store,
        };
    },
    async mounted() {
        if (store.auth.isLogged) this.$router.replace('/dashboards');
    },
    methods: {
        validate() {
            return (this.$refs.form as any).validate();
        },
        async login() {
            if (!this.validate()) {
                store.alert.show('Please ensure to fill in the required fields', 'warning');
                return;
            }
            let isLogged = false;
            await store.loader.run(async () => {
                const result = await store.auth.login(this.form);
                isLogged = (result !== false);
            });

            if (isLogged) {
                this.$router.push('/dashboards');
            } else {
                this.displayError = true;
                await sleep(3000);
                this.displayError = false;
            }
        },
    },
});
</script>

<style scoped>
    .alert {
        position: absolute;
        top: 20%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 500;
    }
    .background-img {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        background-size: cover;
        background-image: url('../../assets/login-background-image.jpg');
    }
</style>
